<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<link rel="stylesheet" href="./layui/css/layui.css">
		<script src="./layui/layui.js"></script>
		<script type="text/javascript" src="js/global.js"></script>
	</head>

	<body>
		<div class="layui-form-item" style="margin-top: 20px" onsubmit="false">
			<div class="layui-form-item">
				<label class="layui-form-label">角色名</label>
				<div class="layui-input-inline">
					<input class="layui-input" name="name" id="name" lay-verify="required" />
				</div>
				<button class="layui-btn" id="serach" data-type="reload">搜索</button>
			</div>
		</div>
		<table id="demo" lay-filter="test"></table>
		<script type="text/html" id="barDemo">
			<!--<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="modules">模块</a>-->
			<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="trees">设置权限</a>
			<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
		</script>
		<script type="text/html" id="toolbarDemo">
			<div class="layui-btn-container">
				<button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
			</div>
		</script>
		<script>
			layui.use(['table', 'form'], function() {
				var table = layui.table;
				var $ = layui.jquery; //引入jquery
				var form = layui.form;
				//解决跨域
				$.ajaxPrefilter(function(options, originalOptions, jqXHR) {
					options.xhrFields = {
						withCredentials: true
					}
				})
				//第一个实例
				table.render({
					elem: '#demo',
					toolbar: '#toolbarDemo' //开启头部栏工具
						,
					url: globalData.server + './roles/getRoles' //数据接口
						,
					page: true //开启分页
						,
					method: 'POST',
					id: 'idTest',
					cols: [
						[ //表头
							{
								field: 'id',
								title: 'ID',
								width: 80,
								sort: true,
								fixed: 'left',
								align: 'center'
							}, {
								field: 'name',
								title: '角色名',
								width: 120,
								align: 'center'
							}, {
								field: 'right',
								title: '操作',
								toolbar: '#barDemo',
								align: 'center',
								width: 250
							}
						]
					]
				});
				$('#serach').on('click', function() {
					var name = $("#name").val(); //上面搜索框的id
					table.reload('idTest', {
						where: { //请求参数
							'name': name,
						}
					});
				});

				//监听头部工具栏
				table.on('toolbar(test)', function(obj) {
					switch(obj.event) {
						case 'add':
							layer.open({ //打开一个页面
								type: 2, //在当前页面打开一个页面
								area: ['500px', '550px'], //页面宽高
								content: 'roles-add.html', //页面地址
								title: '添加角色', //打开页面标题
								end: function() {
									window.location.reload(); //当窗口关闭后刷新页面
								}
							});
							break;
					};
				});
				//监听工具条
				table.on('tool(test)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
					var data = obj.data; //获得当前行数据
					if(obj.event === 'del') { //删除
						layer.confirm('真的删除行么', function(index) {
							var url = globalData.server + './roles/del'; //请求地址
							$.post(url, {
								id: obj.data.id,
							}, function(data) {
								if(data.count > 0) {
									console.log('删除成功');
									window.location.reload(); //刷新页面
								} else {
									layer.msg(data.msg, {
										icon: 6
									});
								}
							}, "json");
						});
					} else
						//				if (obj.event === 'modules') { //模块
						//					layer.open({//打开一个页面
						//						type : 2,//在当前页面之上以弹框的形式，展示编辑页面
						//						area : [ '500px', '550px' ],//页面宽高
						//						content : 'roles-modules-remove.html',//页面所在位置
						//						title : '您正在编辑角色编号为' + obj.data.id + '的模块信息',
						//						success : function(layero, index) {
						//							var body = layer.getChildFrame('body', index);
						//							body.contents().find("#userid").val(obj.data.id);
						//						},
						//						end : function() {
						//							window.location.reload();//当窗口关闭后刷新页面
						//						}
						//					});
						//				}else 
						if(obj.event === 'trees') { //模块 roles-modules-remove-tree.html
							layer.open({ //打开一个页面
								type: 2, //在当前页面之上以弹框的形式，展示编辑页面
								area: ['500px', '550px'], //页面宽高
								content: 'roles-modules-remove-tree.html', //页面所在位置
								title: '您正在编辑角色编号为' + obj.data.id + '的模块信息',
								success: function(layero, index) {
									var body = layer.getChildFrame('body', index);
									body.contents().find("#userid").val(obj.data.id);
								},
								end: function() {
									window.location.reload(); //当窗口关闭后刷新页面
								}
							});
						} else if(obj.event === 'edit') { //编辑
						layer.open({ //打开一个页面
							type: 2, //在当前页面之上以弹框的形式，展示编辑页面
							area: ['500px', '550px'], //页面宽高
							content: 'roles-edit.html', //页面所在位置
							title: '您正在编辑用户编号为' + obj.data.id + '的信息',
							success: function(layero, index) {
								var body = layer.getChildFrame('body', index);
								body.contents().find("#id").val(obj.data.id);
								body.contents().find("#name").val(obj.data.name);
							},
							end: function() {
								window.location.reload(); //当窗口关闭后刷新页面
							}
						});
					}
				});

			});
		</script>
	</body>

</html>